import React, { Component } from 'react';
import LoginCss from "./login.scss";
import { Input, Button, Row, Col, message, Popover } from 'antd';
import cookie from 'react-cookies';
import utils from '../../utils/utils';
import { getPwdLogin } from '../../api/login';
import { auditPwd } from '../../api/accountManage';
import AreaData from '../../component/areaData/areaData.js'; //地址库
import { QuestionCircleOutlined } from '@ant-design/icons';
import { addRole,addId } from '../../redux/action';
import store from '../../redux/store';
import { TabletOutlined, UnlockOutlined} from '@ant-design/icons';
const content = (
    <div className="Popover_pwd">
        <div className="title">密码输入需符合以下条件：</div>
        <div>1、密码长度至少8位，密码含有数字&字母；</div>
        <div>2、含有字母大小写。</div>
    </div>
);

class Login extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            phone: '',
            pwd: '',
            newPwd: '', 
            newPwdAgain: '',
            auth_token:'',
            cookieData:'',
            count: 60,
            liked: true,
            showErr: false,
            checkPwd:  false ,
            disabled: true
        }
    };
    componentDidMount() {
        
    }
    loginPass = () => {
        let _this = this;
        const { phone, pwd } = this.state;
        if (!phone) { message.error('请先输入手机号！', 2); return } 
        if (!utils.isMobile(phone)) { message.error('手机号格式不正确!', 2); return }
        if (!pwd) { message.error('请输入密码!', 2); return }
        let post_data = {
            'user_phone': phone,
            'user_pwd': utils.EncryptEcb(pwd),
            // 'user_pwd':'RtfOO+QORW/ZZew3xiIRaQ=='
        }
        console.log(post_data)
        getPwdLogin(post_data).then(res => {
            console.log(res)
            if (res.data.pwd_updated === 0){
                // 修改密码
                _this.setState({
                    checkPwd: true,
                    auth_token: res.data.auth_token,
                    cookieData: res.data
                })
            }else{
                store.dispatch(addRole(res.data.user_name))
                store.dispatch(addId(res.data.id))
                message.success('登录成功！', 1, () => {
                    cookie.save('station_console_setting_web_login', JSON.stringify(res.data), { path: '/', expires: new Date(new Date(res.data.auth_expire_time).getTime()) });
                    _this.props.history.push({ pathname: `/` })
                });
                
            } 
            
        })
        // const data = {
        //     auth_token: '111',
        //     auth_expire_time: '2021-12-25 11:33:57'
        // }
        // store.dispatch(addRole('wangyueliang'))
        // message.success('登录成功！', 1, () => {
        //     console.log(JSON.stringify(data))
        //     cookie.save('station_console_setting_web_login', JSON.stringify(data), { path: '/', expires: new Date(new Date(data.auth_expire_time).getTime()) });
        //     _this.props.history.push({ pathname: `/` })
        // });

    };
    handleInputChange = e => {
        const phone = e.target.value;
        this.setState({
            phone
        })
    };
    handlecodeChange = e => {
        const pwd = e.currentTarget.value;
        this.setState({
            pwd
        })
    };

    //新密码
    newPwdChange = e => {
        // console.log(e.currentTarget.value)
        const newPwd = e.currentTarget.value;
        const { newPwdAgain } = this.state;
        this.setState({
            newPwd,
            disabled: newPwd !== newPwdAgain
        })
    }
    //新密码--再次输入
    newPwdAgainChange = e => {
        // console.log(e.currentTarget.value)
        const newPwdAgain = e.currentTarget.value;
        const { newPwd } = this.state;
        this.setState({
            newPwdAgain,
            disabled: newPwd !== newPwdAgain
        })
    }

    //修改原密码
    getAuditPwd = e => {
        const { auth_token, newPwd, cookieData } = this.state;
        let _this = this;
        if (!utils.isPassword(newPwd)){ 
            message.error('密码格式不正确,请重新输入!', 2); 
            return 
        }
        let post_data = {
            'auth_token': auth_token,
            'user_pwd': utils.EncryptEcb(newPwd),
        }
        
        console.log(post_data) 
        auditPwd(post_data).then(res => {
            
            console.log(res)
            if(res.code == 0){
                message.success(res.message, 1, ()=>{
                    cookie.save('station_console_setting_web_login', JSON.stringify(cookieData), { path: '/', expires: new Date(new Date(cookieData.auth_expire_time).getTime()) });
                    // _this.props.history.push({ pathname:' /login' })
                    window.location.href = '/login'
                });
            }else{
                message.error(res.detail,1)
            }
        })
    }

   
    render() {
        const { phone, pwd, showErr, checkPwd, newPwd, newPwdAgain, disabled } = this.state;
        return (
            <div className={LoginCss.bg}>
                <Col span={12} className={LoginCss.icon} >
                    <img src={require('../../assets/img/logoed.png')}/>
                </Col>
                <Row className={LoginCss.login_pass}>
                    
                    {!checkPwd ? <Col  className="loginNav">
                        <Row className={LoginCss.login_title}>
                            <img src={require('../../assets/img/logoos.png')} />
                        </Row>
                        <Row className={LoginCss.login_input}>
                            <img  />
                            <Input className={LoginCss.input} name="userPhone" prefix={<TabletOutlined />} value={phone} placeholder="请输入手机号吗" onChange={this.handleInputChange} />
                        </Row>
                        <Row className={LoginCss.login_input}>
                            <Input.Password className={LoginCss.input} name="code" prefix={<UnlockOutlined />} value={pwd} placeholder="请输入登录密码" onChange={this.handlecodeChange} />
                        </Row>
                        <Row className={LoginCss.login_btn}>
                            <Button className={LoginCss.primary} type="primary" onClick={this.loginPass.bind(this)}>登录</Button>
                        </Row>
                    </Col> : <Col  className="loginNav">
                        <Row className={LoginCss.login_title}>
                            <img src={require('../../assets/img/logoos.png')} />
                        </Row>
                        <Row className={LoginCss.pwdTs}>为保证您的账号安全，请更改您的初始密码</Row>
                        <Row className={[LoginCss.login_input,LoginCss.login_input_amend]}>
                            <Input.Password className={LoginCss.input} name="userPhone" value={newPwd} placeholder="请输入新密码" onChange={this.newPwdChange} />
                        </Row>
                        <Row className={LoginCss.pwdTs}>
                            查看密码输入规则 
                            <Popover placement="rightTop" content={content} >
                                <span className={LoginCss.Popover_icon}><QuestionCircleOutlined /></span> 
                            </Popover> 
                        </Row>
                        <Row className={LoginCss.login_input}>
                            <Input.Password className={LoginCss.input} name="code" value={newPwdAgain} placeholder="请再次输入新密码" onChange={this.newPwdAgainChange.bind(this)} />
                        </Row>
                        {disabled && (newPwd || newPwdAgain) ? <Row className={LoginCss.ts}>两次密码输入不一致，请重新输入</Row> : ''}
                        
                        <Row className={LoginCss.login_btn}>
                            <Button className={LoginCss.primary} type="primary" disabled={(!newPwd || !newPwdAgain) && disabled ? true : disabled} onClick={this.getAuditPwd.bind(this)}>确认变更</Button>
                        </Row>
                    </Col>}
                    
                </Row>
            </div>
        )
    }
}

export default Login;